<template>
    <section class="group-list">
        <div class="title">
            <div class="title-left">通过审核的项目 <button>下架</button></div>
            <div class="title-right"><button>发布项目</button><button>删除项目</button></div>
        </div>
        <div class="inner">
            <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                <Checkbox class="list-top"
                          :indeterminate="indeterminate"
                          :value="checkAll"
                          @click.prevent.native="handleCheckAll">全选
                    <span>项目信息</span>
                    <span>项目类别</span>
                    <span>发布时间</span>
                </Checkbox>
            </div>
            <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
                <ul>
                    <li class="out-list">
                        <Checkbox label="香蕉">
                            <div style="display: inline-block"><img src="../../Login/img/weixin.png" alt=""></div>
                            <div style="float: right;margin-left: 20px">
                                <ul>
                                    <li>
                                        <span>标题：[水光针]断大大大打开看看<span class="edit-btn"><Icon type="ios-hammer" /> 编辑</span></span>
                                        <span style="margin: 0 150px">初级补水</span>
                                        <span style="margin-left: 70px">2018-06-20 16:18</span>
                                    </li>
                                    <li>
                                        <span>标题：[水光针]断大大大打开看看<span class="edit-btn"><Icon type="ios-hammer" /> 编辑</span></span>
                                        <span style="margin: 0 150px">初级补水</span>
                                        <span></span>
                                    </li>
                                    <li>
                                        <span>价格：<a style="color: #FE5371">5600.00</a><span>医院价格：8000.00</span></span>
                                        <span style="margin: 0 20px">折扣：<select name="" id=""><option value="">7</option></select></span>
                                        <span>预付金：<input type="text" style="width: 40px;height: 20px"></span>
                                        <span style="margin-left: 270px"><a style="display: inline-block;width: 80px;height: 30px;background-color: #ff5b79;color: #fff;text-align: center;line-height: 30px">重新编辑</a></span>
                                    </li>
                                </ul>
                            </div>
                        </Checkbox>
                    </li>
                    <li class="out-list">
                        <Checkbox label="香蕉">
                            <div style="display: inline-block"><img src="../../Login/img/weixin.png" alt=""></div>
                            <div style="float: right;margin-left: 20px">
                                <ul>
                                    <li>
                                        <span>标题：[水光针]断大大大打开看看 <span class="edit-btn"><Icon type="ios-hammer" /> 编辑</span></span>
                                        <span style="margin: 0 150px">初级补水</span>
                                        <span style="margin-left: 70px">2018-06-20 16:18</span>
                                    </li>
                                    <li>
                                        <span>标题：[水光针]断大大大打开看看 <span class="edit-btn"><Icon type="ios-hammer" /> 编辑</span></span>
                                        <span style="margin: 0 150px">初级补水</span>
                                        <span></span>
                                    </li>
                                    <li>
                                        <span>价格：<a style="color: #FE5371">5600.00</a><span>医院价格：8000.00</span></span>
                                        <span style="margin: 0 20px">折扣：<select name="" id=""><option value="">7</option></select></span>
                                        <span>预付金：<input type="text" style="width: 40px;height: 20px"></span>
                                        <span style="margin-left: 270px"><a style="display: inline-block;width: 80px;height: 30px;background-color: #ff5b79;color: #fff;text-align: center;line-height: 30px">重新编辑</a></span>
                                    </li>
                                </ul>
                            </div>
                        </Checkbox>
                    </li>
                </ul>
            </CheckboxGroup>
        </div>
        <div style="text-align: center;margin: 20px 0"><Page :total="100" /></div>
    </section>
</template>

<script>

    export default {
        name: 'ProjectCheck',
        components: {

        },
        data () {
            return {
                formItem: {},
                indeterminate: true,
                checkAll: false,
                checkAllGroup: ['香蕉', '西瓜']
            }
        },
        created () {

        },
        computed: {

        },
        methods: {
            checkAllGroupChange (data) {
                if (data.length === 3) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            }
        }
    }

</script>

<style lang="less" scoped>
    @import "../../../style/style.less";
    .group-list {
        border: 1px solid @border-color;
        padding: 15px;

    }
    .title{
        color: #ff5371;
        font-size: 18px;
        padding-bottom: 15px;
        overflow: hidden;
    }
    .title-left{
        float: left;
    }
    .title-right{
        float: right;
    }
    .title-right button{
        margin-right: 43px;
    }
    .title button{
        width: 109px;
        height: 31px;
        background-color: #ff5371;
        border-radius: 4px;
        color: #fff;
        outline: none;
        border: none;
        font-size: 14px;
    }
    /*.ivu-icon[data-v-5e279927][data-v-5e279927]{*/
    /*color: #fff;*/
    /*}*/
    .out-list{
        height: 115px;
        padding: 10px;
        border-bottom: 1px dashed #eeeeee;
    }
    .out-list ul li:first-child{
        background-color: #eeeeee;
    }
    .ivu-icon[data-v-5e279927]{
        color: #FE5371;
    }
    .out-list ul li{
        width: 800px;
        height: 30px;
        padding-left: 10px;
        line-height: 30px;
    }
    .out-list ul li:first-child{
        background-color: #F8F8F8;
    }
    .ivu-icon[data-v-061bc96f]{
        color: #FE5371;
    }
    .list-top{
        line-height: 30px;
        width: 906px;
        height: 30px;
        background-color: #F5EEEF;
    }
    .list-top span{
        margin: 0 130px;
    }

</style>
